<div class="legend">
  This tab shows the location of the identified peptides mapped onto the protein. Only peptides with no missed cleavages are shown in this visualization and are colored either by their uniqueness or log intensity. In addition, detailed informations are shown by mouse over and the corresponding MS/MS spectrum can be reviewed by clicking on it.
</div>

<div class="seqCovPlot">
  <g:set var="changeColorBox" value="${0}" />
  <div class="legends">
    <div class="colorPeptidesSelection">
      <div class="changeColor" onclick="changeColor('uniqueness');"><g:radio name="colorPeptides${changeColorBox}" value="uniqueness" checked="true"/>Color peptides by uniqueness</div>
      <div class="changeColor" onclick="changeColor('intensity');"><g:radio name="colorPeptides${changeColorBox}" value="intensity" />Color peptides by intensity</div>
    </div>
    <div class="uniqScale">
      <div class="shared"></div>Shared peptide<br/>
      <div class="razor"></div>Razor peptide<br/>
      <div class="uniqG"></div>Unique peptide (groups)<br/>
      <div class="uniqP"></div>Unique peptide (proteins)<br/>
    </div>
    <div class="colorScale">
      <g:each in="${0..240}">
        <div class="color" style="background-color: hsl(${240-it}, 100%, 50%);left:${it}px;"></div>
      </g:each>
      <div class="low">4</div>
      <div class="medium"><div class="scaleLabel">7.5</div></div>
      <div class="high">9</div>
      <div class="scale">Log10 Intensity</div>
    </div>
  </div>
  <g:each in="${Projects.keySet()}" var="proj">
    <div class="reference seqCovProj${proj.id}ref">
    <div class="sep labeled" style="left:0px;">
      <div class="reflabel">1</div>
    </div>
    <g:each in="${1..(SeqLength/10)}" var="i">
      <div class="sep<g:if test="${i%10==0}"> labeled</g:if>" style="left:${(((i*100)/(SeqLength/10))).toDouble()}%;"><g:if test="${i%10==0}"><div class="reflabel">${i*10}</div></g:if></div>
    </g:each>
    <div class="sep labeled" style="left:100%;">
      <div class="reflabel">${SeqLength}</div>
    </div>
  </div>
    <div class="project">
      <div class="projname">${proj.name}</div>
      <div class="experiments" id="seqCovProj${proj.id}">
      <g:each in="${Projects[proj].keySet()}" var="exp">
        <div class="experiment">
          <div class="expname">${exp}</div>
          <div class="peptides">
            <g:each in="${Projects[proj][exp]}" var="pep">
              <g:set var="pepClass" value="${(pep.UniqP)?' uniqP':((pep.UniqG)?' uniqG':((pep.Razor)?' razor':''))}" />
              <g:remoteLink action="showMsMsSpectra" update="msmsSpectra" params="${[id:params.id, project:proj.id, peptide:pep.Id, cls:pep.Cls, cel:pep.Cellline]}" class="peptide${pepClass}" style="left:${(((pep.Start*100)/(SeqLength)).toDouble())}%; width:${Math.max((((pep.Seq.size()-1)*100)/(SeqLength)).toDouble(), 1)}%;" intensity="${(((Math.log10(pep.Intensity)-4)*48).toInteger())}">
                <div class="info">
                  <div class="type"><g:if test="${pep.UniqP}">Unique Peptide (Proteins)</g:if><g:else><g:if test="${pep.UniqG}">Unique Peptide (Groups)</g:if><g:else><g:if test="${pep.Razor}">Razor Peptide</g:if><g:else>Shared Peptide</g:else></g:else></g:else></div>
                  <div class="position">Position: ${pep.Start} - ${pep.End}</div>
                  <div class="mass">Mass: ${pep.Mass} Da</div>
                  <div class="intensity">Log10 Intensity: ${(Math.log10(pep.Intensity)*100).toInteger()/100}</div>
                  <div class="pepseq">${pep.Seq}</div>
                </div>
              </g:remoteLink>
            </g:each>
          </div>
        </div>
      </g:each>
      </div>
    </div>
  </g:each>
</div>
<script type="text/javascript">sequenceCoverageInit();</script>